<template>
  <div id="home">
    <van-nav-bar title="吃了吗外卖">
      <template #left>
        <router-link to="/search" class="search">
          <van-icon name="search" size="18" />
        </router-link>
      </template>
      <template #right>
        <router-link to="/login" tag="span">退出登录</router-link>
      </template>
    </van-nav-bar>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/img/banner1.jpg" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/banner2.jpg" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/banner3.jpg" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :border="false" class="naver">
      <van-grid-item
        v-for="(icon, index) in icons"
        :key="index"
        :to="'/type/' + index"
      >
        <img :src="icon" />
        <p>{{ titles[index] }}</p>
      </van-grid-item>
    </van-grid>

    <div class="shop_list_container">
      <header class="shop_header">
        <van-icon name="shop-o" />
        <span class="shop_header_title">附近商家</span>
      </header>
      <shop-list></shop-list>
    </div>

    <bottom :active="0"></bottom>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ShopList from "@/components/shoplist";
import Bottom from "@/components/bottom";

export default {
  name: "home",
  components: { ShopList, Bottom },
  data() {
    return {
      active: 0,
    };
  },
  computed: {
    ...mapState({
      icons: (state) => state.badge.icons,
      titles: (state) => state.badge.titles,
    }),
  },
};
</script>

<style lang="scss" scoped>
$bc: #e4e4e4;

.search {
  margin-top: 5px;
}
>>> .van-nav-bar {
  background: #42a5f3;
  color: #fff;
  .van-icon,
  .van-nav-bar__title {
    color: #fff;
  }
}
.my-swipe img {
  width: 100%;
  height: 300px;
}
.naver img {
  width: 55px;
}
>>> .van-grid-item__content {
  padding: 8px;
}
.shop_list_container {
  border-top: 1px solid $bc;
  background-color: #fff;
  .shop_header {
    margin-left: 10px;
    .shop_header_title {
      color: #999;
      font-size: 16px;
      line-height: 50px;
    }
  }
}
>>> .van-icon-shop-o {
  font-size: 20px;
}
</style>